<template>
	<view class="warp">
		<view class="header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="padding: 20upx 0 20upx 0;color: #FFF;font-size: 18px;font-weight: 400;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				服务订单
			</view>
			<view class="mycard">
				<view class="tabs">
					<view class="order-type" @click="openPage('myOrder')">
						<image src="../../static/images/icon/money5.png" mode="widthFix"></image>
						<view>
							<text >收款订单</text>
						</view>
					</view>
					<view class="order-type" >
						<image src="../../static/images/icon/sorder2.png" mode="widthFix"></image>
						<view>
							<text style="color: #FF2B3F;font-weight: bold;">服务订单</text>
						</view>
					</view>
				</view>
				<view class="search">
					<view class="days_list">
						<view class="days" v-for="(day,idx) in days" :key="idx" :class="[idx == curr_day?'act':'']" @click="getOrderStatistic(idx)">
							{{day}}
						</view>
					</view>
					<view class="btn-items" @click="showFilterStatus = true" >
						<image src="../../static/images/icon/filter.png" mode="widthFix" style="width: 24px;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="statistics" :style="{backgroundImage: 'url('+website+'static/home/img/topbg2.png)'}">
			<view class="total">
				<view class="tit" style="letter-spacing: 2px;">消耗总额</view>
				<view><text class="sub-money">￥</text> {{info.total}}</view>
			</view>
			<view class="nums">
				<view class="line">
					<view class="">{{info.m}}</view>
					<view class="">订单数量</view>
				</view>
				<view>
					<view class="">{{info.u}}</view>
					<view class="">消费人数</view>
				</view>
			</view>
		</view>
		<tui-tabs :tabs="tabs" :zIndex="1" selectedColor="#000" bold sliderBgColor="#FF2B3F" :currentTab="status" @change="changeTab" backgroundColor="#f6f6f6"></tui-tabs>
		<view class="mycard"  v-for="(item,index) in orderlist" :key="item.osn">
			<tui-list-cell unlined :unlined="true" :size="28">
				<view class="tui-item-box" @click="openOrder(item.osn)">
					<image :src="item.avatar" class="tui-msg-pic" mode="widthFix"></image>
					<view class="center">
						<view class="username"><text>{{item.username}}</text>
						</view>
						<view class="time">
							{{item.create_time}}
						</view>
					</view>
					<view class="right">
						<view class="status">{{item.status_cn}}</view>
						<view class="money">消耗<text style="font-size: 20upx;color: #FF2B3F;">￥</text><text style="color: #FF2B3F;font-size: 32upx;">{{item.payout}}</text></view>
					</view>
				</view>
				<view class="btn-group">
					<view class="btn" @click="newOrder(item.mid)">开单</view>
					<view v-if="item.status ==0" class="btnb" @click="toPay(item.osn)">付款</view>
					<view v-if="item.status >=0 && item.status<2 && item.type!=1" class="btnc" @click="failOrder(item.osn)">作废</view>
				</view>
				<view class="goods-group" @click="openOrder(item.osn)">
					<view class="goods_item" v-for="(g,ind) in item.goods">
						<text>{{g.goods_name}}</text>
						<text> X{{g.num}}</text>
					</view>
				</view>
				<view clsaa="osn" @click="openOrder(item.osn)" style="color: #999999;font-size: 12px;padding-top: 5px;">订单号：{{item.osn}}</view>
			</tui-list-cell>
		</view>
		<tui-no-data v-if="nodata" :fixed="false" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-no-data>
		<view class="drawer"  v-show="showFilterStatus">
			<view class="mask" @click.stop="showFilterStatus = false"></view>
			<view class="filter-box" :class="[showFilterStatus?'show':'']">
				<view class="tit">选择时间</view>
				<view class="times">
					<view class="timea" @click="showDate(1)">{{search.timea?search.timea:'开始时间'}}</view>
					<view style="padding-top: 10upx;"> <tui-icon name="reduce" :size="20"></tui-icon> </view>
					<view class="timeb" @click="showDate(2)">{{search.timeb?search.timeb:'结束时间'}}</view>
				</view>
				<view class="line"></view>
				<view class="username">
					<view class="tit">会员姓名</view>
					<view class="input-box"><input type="text" placeholder="请输入会员姓名" :value="search.username" @input="inputUsername"></view>
				</view>
				<view class="line"></view>
				<view class="osn">
					<view class="tit">流水号</view>
					<view class="input-box"><input type="text" placeholder="请输入流水号" :value="search.osn" @input="inputOsn"></view>
				</view>
				<view class="btn-group">
					<view class="restBtn" @click="restSearch">
						重置
					</view>
					<view class="subBtn" @click="subSearch">
						确定
					</view>
				</view>
			</view>
		</view>
		<tui-datetime ref="dateTime" @confirm="changeTime"></tui-datetime>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				website:this.tui.imghost,
				top:0,
				winWidth:0,
				currentTab:0,
				showFilterStatus:false,
				tabs: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "待发货"
				}, {
					name: "已发货",
				},{
					name: "已作废",
				}],
				days: ['今天','昨天','本周','上周','本月','上月'],
				curr_day:0,
				kw:'',
				status:0,
				param:{page:1,type:1,status:'all'},
				last_page:3,
				orderlist:[],
				nodata:true,
				info:{},
				search:{
					timea:'',
					timeb:'',
					username:'',
					osn:'',
				},
			}
		},
		created() {
			setTimeout(() => {
				// 高度自适应
				uni.getSystemInfo({
					success: (res) => {
						this.winWidth = res.windowWidth;
					}
				});
			}, 50);
		},
		onShow() {
			this.tui.chkAuth();
			this.getOrder();
			this.getOrderStatistic(this.curr_day)
		},
		onLoad(opt) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
			if(opt.t){
				this.curr_day = parseInt(opt.t)
			}
		},
		methods: {
			changeTab(vv){
				this.param.page=1;
				this.last_page=2;
				this.status =vv.index;
				switch (vv.index){
					case 0:
						this.param.status = 'all';
						break;
					case 4:
						this.param.status = -1;
						break;
					default:
						this.param.status = vv.index -1;
						break;
				}
				this.orderlist=[];
				this.getOrder();
			},getOrderStatistic(idx){
				this.curr_day =idx;
				this.tui.get('user/api/orderStatistics',{d:idx,type:1}).then(res=>{
					this.info = res.data;
				});
			},
			searchUser(){
				console.log(this.kw);
			},
			openPage(uri){
				uni.redirectTo({
					url:uri
				})
			},
			getOrder(){
				if(this.last_page < this.param.page){return;}
				this.tui.get('user/order/orderlist',this.param).then(res=>{
					this.last_page = res.data.last_page;
					this.param.page++;
					this.orderlist=[...this.orderlist,...res.data.data];
					if(this.orderlist.length <1){
						this.nodata = true
					}else{
						this.nodata = false
					}
				})
			},
			newOrder(mid){
				uni.navigateTo({
					url:"../order/order?mid="+mid
				})
			}
			,openOrder(id){
				uni.navigateTo({
					url:'detail?osn='+id
				})
			},toPay(osn){
				uni.navigateTo({
					url:"../card/confirm/confirm?osn="+osn
				})
			},
			failOrder(osn){
				uni.showModal({
					title:"注意",
					content:"确定作废吗？请检查单号和下单人！",
					success:res=> {
						if(res.confirm){
							this.tui.get('user/order/failOrder',{osn:osn}).then(res=>{
								if(res.code){
									this.param.page=1;
									this.orderlist=[];
									this.getOrder()
									this.tui.toast('操作成功！');
								}else{
									this.tui.toast(res.msg);
								}
								
							});
						}else{
							return;
						}
					}
				})
			},
			back(){
				uni.navigateBack()
			},showDate(v){
				this.time_index = v;
				this.$refs.dateTime.show();
			},changeTime(e){
				if(this.time_index ==1){
					console.log(e.result);
					this.search.timea = e.result;
				}else{
					this.search.timeb = e.result;
				}
			},restSearch(){
				this.search ={
					timea:'',
					timeb:'',
					username:'',
					osn:'',
				}
				this.param.timea='';
				this.param.timeb='';
				this.param.username='';
				this.param.osn='';
			},subSearch(){
				this.param.page=1;
				this.last_page=2;
				this.param.timea=this.search.timea;
				this.param.timeb=this.search.timeb;
				this.param.username=this.search.username;
				this.param.osn=this.search.osn;
				this.orderlist =[];
				this.showFilterStatus=false;
				this.getOrder();
			},inputUsername(e){
				 this.search.username = e.detail.value;
			},inputOsn(e){
					this.search.osn = e.detail.value;
			}
		},
		onReachBottom() {  
			this.getOrder();  
		},  
	}
</script>

<style>
	@import '/static/style/thorui.css';
	.header{
		background-repeat: no-repeat;
		background-size: 100% 80%;
	}
	.page-title .back-btn {
	    position: absolute;
	    left: 0;
	    width: 50px;
	    box-sizing: border-box;
	}
	.msg_ico image{width: 28px;}
	.my-money .rankings_ico image{width: 35px;}
	.tabs{
		display: flex;
	}
	.tabs .order-type{width: 100%;text-align: center;}
	.tabs .order-type image{width: 60upx;margin-bottom: 10upx;}
	.search{
		padding: 40upx 20upx 20upx;
		display: flex;
	}
	.search .days_list{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.search .days_list .days{
		display: inline-block;
		background: #f1f1f1;
		padding: 6upx 14upx;
		height: 46upx;
		font-size: 24upx;
		line-height: 48upx;
		margin: 0 10upx;
		border-radius: 10upx;
	}
	.search .days_list .days.act{
		background-color: #FF2B3F;
		color: #FFFFFF;
	}
	.search .btn-items{width: 80upx;height: 46upx;line-height: 48upx;text-align: right;}
	.search .btn-items .tui-icon{margin-left: 30upx;}
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: flex-start;
	}
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	.tui-flex-box{
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.tui-item-box .right{margin-left: auto;}
	.tui-item-box .right .status{color: #999;font-size: 24upx;text-align: right;}
	.tui-item-box .right .money{color: #333;font-size: 30upx;font-weight: 700;padding-top:20upx;text-align: right;}
	.tui-item-box .center .username{font-weight: 700;display: flex;font-size: 30upx;}
	.tui-item-box .center .time{color: #999;font-size: 24upx;padding-top: 20upx;}
	
	.statistics{margin: 0 30upx;background-size: 100% 100%;color: #FFFFFF;padding: 30upx;}
	.statistics .total{text-align: center;font-weight: 700;font-size: 32upx;}
	.statistics .total .sub-money{font-size: 24upx;}
	.statistics .nums{display: flex;text-align: center;padding-top: 30upx;}
	.statistics .nums>view{width: 100%;position: relative;font-size: 28upx;}
	.statistics .nums>view.line::after{
		content: '';
		height: 30px;
		width: 1px;
		border-left: 1px solid #FFF;
		position: absolute;
		right: 0;
		top: 5px;
		opacity: 0.4;
	}
	.btn-group{padding-top:20upx;padding-left: 120upx;}
	.btn-group .btn{display: inline-block;padding: 8upx 20upx;background-color: #007AFF;color: #FFFFFF;border-radius: 10upx;margin-right: 30upx;}
	.btn-group .btnb{display: inline-block;padding: 8upx 20upx;background-color: #ff136d;color: #FFFFFF;border-radius: 10upx;margin-right: 30upx;}
	.btn-group .btnc{display: inline-block;padding: 8upx 20upx;background-color: #b50003;color: #FFFFFF;border-radius: 10upx;margin-right: 30upx;}
	.goods-group{padding-top: 10px;padding-left: 60px;}
	.goods-group .goods_item{display: flex;border:1px solid #e5e5e5;padding: 10upx 14upx;border-radius: 10upx;background-color: #F9F9F9;display: flex;align-items: center;justify-content: space-between;}
	.drawer{position: fixed;top:0;left:0;width: 100%;height:100%;z-index: 999;}
	.drawer .mask{position: absolute;left:0;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.7);}
	.drawer .filter-box{
		position: absolute;left: 100%;width: 85%;
		background-color: #FFFFFF;height: 90%;top: 5%;
		border-radius: 40upx;padding:30upx;
		box-sizing: border-box;
		border-top-right-radius: 0;border-bottom-right-radius: 0;
		transition: all 0.6s ease-in;
	}
	.drawer .filter-box.show{
		left:15%;
		transition: all 0.6s ease-in;
	}
	.drawer .filter-box .line{height: 20upx;margin: 0 -30upx;background-color: #EEE;}
	.drawer .filter-box .tit{font-size: 30upx;font-weight: 700;}
	.drawer .filter-box .times{display: flex;justify-content: space-between;padding: 40upx 0;width: 100%;box-sizing: border-box;}
	.drawer .filter-box .times .timea,.drawer .filter-box .times .timeb{text-align: center;padding: 10upx 0;background-color: rgb(242,242,242);color: #9e9e9e;font-size: 24upx;border-radius: 40upx;width: 45%;box-sizing: border-box;}
	.drawer .filter-box .btn-group{
		width: 100%;
		position: absolute;
		bottom: 30upx;
		display: flex;
		padding: 0 30upx;
		box-sizing: border-box;
		left: 0;
		justify-content: space-between;
	}
	.drawer .filter-box .btn-group>view{
		width: 48%;
		text-align: center;
		border-radius: 20upx;
		background-color: #EEEEEE;
		padding: 20upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.drawer .filter-box .btn-group .subBtn{
		background-color: #fb2b3b;
		color: #FFFFFF;
	}
	.drawer .filter-box .username{display: flex;padding: 40upx 0;}
	.drawer .filter-box .osn{display: flex;padding: 40upx 0;}
	.drawer .filter-box .tit{width: 25%;}
	.drawer .filter-box .input-box{text-align: right;width:75%;}
	.drawer .filter-box .input-box input{text-align: right;width: 100%;font-size: 28upx;}
	
	
</style>
